<template>
    <!-- 出征记录 -->
    <div class="proofGo">
        <div class="proofGo-content">
            <div class="padding15All" style="height:50px;box-sizing:border-box;">
                出证记录
            </div>
            <ProofTabs type="go" @Listsearch="Listsearch"/>
            <div style="height:20px;background-color: #F5F6F7;"></div>
            <div class="tableMain">
                <div class="tableMainContent">
                    <div class="table padding15All">
                        <el-table
                            ref="multipleTable"
                            :data="list"
                            tooltip-effect="dark"
                            style="width: 100%;height:100%;"
                            @selection-change="handleSelectionChange"
                            :empty-text='emtypetxt'>
                            <el-table-column
                                fixed
                                prop="userName"
                                label="申请人"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="applyName"
                                label="证据类型"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="applyTime"
                                label="申请时间"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="contractName"
                                label="申请出证业务名称"
                                width="">
                            </el-table-column>
                            <el-table-column
                                prop="applyType"
                                label="状态"
                                width="">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="320">
                                <template slot-scope="scope">
                                    <el-button @click="goPayInfo(scope.row.contractEvidenceId)" type="text" size="small">详情</el-button>
                                    <a target="_blank" :href="scope.row.applyResult" style="padding-left:10px;">
                                        <el-button type="text" size="small">下载</el-button>
                                    </a>
                                    
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages padding15All">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="params.pageNo"
                            :page-size="params.pageSize"
                            layout="prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ProofTabs from './components/ProofTabs.vue'
import { applyList } from '@/api/proof'
export default {
  components: { ProofTabs },
    data(){
        return{
            activeName:'first',

            currentPage3: 1,

            list:[],
            total:0,
            emtypetxt: '',

            params: {
                applyEndTime:'',//申请时间
                applyStartTime:'',//申请时间
                contractName:'',//申请出证业务名称
                // enterpriseId:'',//企业id
                // userId:'',//申请人Id
                pageNo: 1,
                pageSize: 10
            },

            tableData: [
                {
                    a:'合同14234122',
                    b:'哈哈哈',
                    c:'审批通过',
                    d:'2000-11-11 11:11',
                    e:'哈哈哈哈哈哈哈哈',
                    f:'SAAS',
                    g:'用印审批',
                    h:'aaa，哈哈哈',
                    i:' ASFA314412341234',
                    j:'阿斯顿发空间阿斯顿发卡记录',
                    k:'哈哈哈',
                    l:'哈哈哈',
                },
            ],
        }
    },
    mounted() {
        this.getApplyList()
    },
    methods:{
        getApplyList(){
            this.emtypetxt = '加载中...';
            applyList(this.params).then(res => {
                this.list = res.result.records
                this.total = res.result.total
                if (this.list.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        handleSizeChange(val) {
            this.params.pagesize = val
            this.getApplyList()
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            this.getApplyList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询
        Listsearch(e){
            this.params.applyEndTime = e.applyEndTime;//申请时间
            this.params.applyStartTime = e.applyStartTime;//申请时间
            this.params.contractName = e.contractName1;//申请出证业务名称
            this.getApplyList()
        },
        // 跳转出征详情
        goPayInfo(id){
            this.$router.push({name:'proofGoDetail',query:{contractEvidenceId:id}},()=>{})
        },
    }

}
</script>

<style lang="scss" scoped>
.proofGo{
    flex-grow: 1;
    .proofGo-content{
        height: 100%;
        display: flex;
        flex-direction: column;

        .tableMain{
            flex-grow: 1;

            .tableMainContent{
                display: flex;
                height: 100%;
                flex-direction: column;
                .table{
                    overflow-y: scroll;
                    flex-grow: 1;
                }
                .pages{
                    flex-basis: 60px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            
        }
    }
}
</style>